<template>
  <el-container>
    <el-header>
      <div>
        <!-- 病历号: -->
        <!-- <el-input v-model="patiendId" placeholder="请输入内容" style="width:200px"></el-input>
        <el-button :offset="10">确认</el-button>-->
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="grid-content bg-purple">病历号:</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-input v-model="patiendId" placeholder="请输入内容" style="width:200px"></el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-button @click="getInfo">确认</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-header>
    <el-main>
      <el-table :data="patiendInfo" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="idNumber" label="身份证号" width="180"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </el-main>
    <el-main>
      收费项目
      <el-table :data="itemData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column>
          <!-- <el-checkbox></el-checkbox> -->
          <el-table-column type="selection" width="55"></el-table-column>
        </el-table-column>
        <!-- <el-table-column prop="date" label="日期" width="180"></el-table-column> -->
        <el-table-column prop="costName" label="项目名称" width="180"></el-table-column>
        <el-table-column prop="costType" label="项目类型" width="180"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="totalCost" label="总费用" width="180"></el-table-column>
        <!-- 其实在el-table下,书写的各个列的信息,然后会根据userData自动生成n行 -->
        <el-table-column align="right"></el-table-column>
      </el-table>
      <div></div>
      <div style="float:right">
        <el-button @click="readyPay" type="primary">确定缴费</el-button>
      </div>
    </el-main>
    <el-dialog title="选定项目" :visible.sync="queryDialogVisible">
      <el-table :data="multipleSelection" style="width: 100%">
        <!-- <el-table-column prop="date" label="日期" width="180"></el-table-column> -->
        <el-table-column prop="costName" label="项目名称" width="180"></el-table-column>
        <el-table-column prop="costType" label="项目类型" width="180"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="totalCost" label="费用" width="180"></el-table-column>
        <!-- 其实在el-table下,书写的各个列的信息,然后会根据userData自动生成n行 -->
        <el-table-column align="right"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="queryDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectPay">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
import { pay, selectInfo } from "@/api/diagRecords.js";
export default {
  data() {
    return {
      queryDialogVisible: false,
      multipleSelection: [],
      patiendId: "",
      invoiceNumber: "",
      patiendInfo: [
        {
          name: "",
          idNumber: "",
          address: "",
          age: ""
        }
      ],
      item: {
        costId: "",
        costName: "",
        costType: "",
        createTime: "",
        totalCost: ""
      },
      itemData: [
        {
          costId: "1",
          costName: "1",
          costType: "1",
          createTime: "1",
          totalCost: "1"
        },

        {
          costId: "2",
          costName: "2",
          costType: "2",
          createTime: "2",
          totalCost: "2"
        },
        {
          costId: "3",
          costName: "3",
          costType: "3",
          createTime: "3",
          totalCost: "3"
        }
      ],
      itemPay: [],
      itemSelect: []
    };
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    getInfo() {
      selectInfo(this.patiendId).then(response => {
        if (response.data.code == 0) {
          for (var i = 0; i < response.data.data.data.lenth; i++) {
            let tmp = {
              costId: response.data.data.data[i].costId,
              costName: response.data.data.data[i].costName,
              costType: response.data.data.data[i].costType,
              createTime: response.data.data.data[i].createTime,
              totalCost: response.data.data.data[i].totalCost
            };
            this.itemData.push(tmp);
          }
          let tmp = {
            name: response.data.data.patient.name,
            idNumber: response.data.data.patient.idNumber,
            address: response.data.data.patient.address,
            age: response.data.data.patient.age
          };
          this.patiendInfo.push(tmp);
        } else {
          this.$message("病历号不正确！");
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    readyPay() {
      var cost = 0;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        cost += parseInt(this.multipleSelection[i].totalCost);
      }
      let tmp = {
        costName: "总计",
        totalCost: cost
      };
      this.multipleSelection.push(tmp);
      this.queryDialogVisible = true;
    },
    selectPay() {
      for (var i = 0; i < this.multipleSelection.length; i++) {
        let tmp = {
          costId: this.multipleSelection[i].costId,
          costType: this.multipleSelection[i].costType
        };
        this.itemPay.push(tmp);
      }
      console.log(this.itemPay);
      pay(this.itemPay).then(response => {
        if (response.data.code == 0) {
          this.invoiceNumber = response.data.data.invoiceNumber;
          this.itemData.clear();
          this.queryDialogVisible = false;
          this.$message("支付成功！发票号：" + this.invoiceNumber);
        } else {
          this.queryDialogVisible = false;
          this.$message("支付失败！");
        }
      });
    }
  }
};
</script>